$def with (course,student_list,audience_list,other_students,users_info,groups,msg,error)

$#
$# This file is part of INGInious. See the LICENSE and the COPYRIGHTS files for
$# more information about the licensing of this file.
$#

$var title: $:_("Edit groups")

$def ColumnF():
    $:template_helper.call('course_admin_menu',course=course,current='groups')
$var Column: $:ColumnF()

$def NavbarF():
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="$get_homepath()/course/$course.get_id()">$course.get_name(user_manager.session_language())</a></li>
            <li class="breadcrumb-item"><a href="$get_homepath()/admin/$course.get_id()" title=$:_('"Administration"') data-toggle="tooltip" data-placement="bottom">
                <i class="fa fa-user-secret"></i></a></li>
            <li class="breadcrumb-item active"><a href="#"><i class='fa fa-users'></i> $:_("Groups") <span class="sr-only">$:_("(current)")</span></a></li>
        </ol>
    </nav>
$var Navbar: $:NavbarF()

<h2>$(_("Groups"))
    <div class="pull-right">
        <div class="btn-group btn-group-sm">
            <button type="submit" id="switch" class="btn btn-danger" data-toggle="modal" data-target="#upload_modal"><i class="fa fa-upload"></i>  $:_("Upload structure")</button>
            <a href="?download" class="btn btn-success"><i class="fa fa-download"></i>  $:_("Download structure")</a>
        </div>
    </div>
</h2>

<div class="modal fade" id="upload_modal">
    <form method="post" enctype="multipart/form-data" action="#">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"> $:_("Upload course structure")</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <p> $:_("Note : Please refer to documentation for file format")</p>
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label"> $:_("Course structure")</label>
                        <input name="groupfile" type="file">
                    </div>
                </div>
                <div class="modal-footer">
                    <button name="upload" class="btn btn-danger btn-block" type="submit"><i class="fa fa-upload"></i>  $:_("Upload (will erase current settings)")</button>
                </div>
            </div>
        </div>
    </form>
</div>

$if error:
    <div class="alert alert-danger alert-dismissable" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        $:msg
    </div>
$elif msg:
    <div class="alert alert-success alert-dismissable" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        $:msg
    </div>

<!-- Modal -->
<div id="student_modal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">$:_("Add student")</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form onsubmit="student_add();return false;">
                    <div id="tab_new_student">
                        <div class="row">
                            <div class="col-md-6">
                                <label class="control-label" for="new_student">$:_("Student username (will be registered) :")</label>
                            </div>
                            <div class="col-md-6">
                                <input id="new_student" name="new_student" type="text" class="form-control" placeholder="$:_('Student username')">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">$:_("Cancel")</button>
                <button type="button" class="btn btn-primary" onclick="javascript:student_add()">$:_("Add student")</button>
            </div>
        </div>
    </div>
</div>

<form method="post" enctype="multipart/form-data" class="form-horizontal">
    <input type="hidden" id="audiences" name="audiences" value="false" />
    <div id="groups" class='list-group'>
        <div class="card border-warning mb-3 group">
            <div class="card-header bg-warning text-white clearfix" role="tab">
                $:_("Ungrouped students")
                <a class="text-white pull-right" id="group_delete" href="#" data-toggle="modal" data-target="#student_modal">
                    <i class="fa fa-plus"></i>
                </a>
            </div>
            <input id="size" type="hidden" class="form-control" value="0">
            <ul id="group_0" class="students list-group list-group-flush">
                $for username in other_students:
                        <li data-username="$username" class="list-group-item group-entry">
                            $if users_info[username] is not None:
                                <span id="$username']"><i class="fa fa-arrows"></i> $users_info[username][0] ($username)</span>
                            $else:
                                <span id="$username']"><i class="fa fa-arrows"></i> $username</span>
                        </li>
            </ul>
        </div>


        $for index,group in enumerate((groups + [None])):
                $if group is None:
                    <div id="$(index+1)" style="display:none;" class="card mb-3 group-card">
                        <div class="card-header clearfix" role="tab">
                            <div class="row">
                                <div class="col-sm-6 col-xs-12">
                                    <input type="text" style="height: 22px; padding: 2px 5px; font-size: 12px; line-height: 1.5;" class="form-control" id="description" name="description" placeholder="$:_('Group description')" value="$:_('New group')">
                                </div>
                                <div class="col-sm-2 col-xs-3" style="text-align: right;">
                                    <label>$:_("Max group size :")</label>
                                </div>
                                <div class="col-sm-3 col-xs-7">
                                    <input style="height: 22px; padding: 2px 5px; font-size: 12px; line-height: 1.5;" id="size" type="number" class="form-control" value="2">
                                </div>
                                <div class="col-sm-1 col-xs-2">
                                    <a class="pull-right" id="group_delete" href="#" onclick="javascript:group_delete($$(this).rparent(4).attr('id'))" data-toggle="tooltip" title=$:_('"Delete group"')>
                                        <i class="fa fa-trash-o"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                $else:
                    <div id="$(index+1)" class="card mb-3 group-card group">
                        <input type="hidden" id="_id" name="_id" value="$group['_id']" />
                        <div class="card-header clearfix" role="tab">
                            <div class="row">
                                <div class="col-sm-6 col-xs-12">
                                    <input type="text" style="height: 22px; padding: 2px 5px; font-size: 12px; line-height: 1.5;" class="form-control" id="description" name="description" placeholder="$:_('Group description')" value="$group['description']">
                                </div>
                                <div class="col-sm-2 col-xs-3" style="text-align: right;">
                                    <label>$:_("Max group size :")</label>
                                </div>
                                <div class="col-sm-3 col-xs-7">
                                    <input style="height: 22px; padding: 2px 5px; font-size: 12px; line-height: 1.5;" id="size" type="number" class="form-control" value="$group['size']">
                                </div>
                                <div class="col-sm-1 col-xs-2">
                                    <a class="pull-right" id="group_delete" href="#" onclick="javascript:group_delete($$(this).rparent(4).attr('id'))" data-toggle="tooltip" title=$:_('"Delete group"')>
                                        <i class="fa fa-trash-o"></i>
                                    </a>
                                </div>
                            </div>
                        </div>

                <div class="card-header clearfix" role="tab">
                    <div class="row">
                        <div class="col-sm-6 col-xs-12">
                            $:_("Restrict to audiences")
                        </div>
                        <div class="col-sm-4 col-xs-6" style="text-align: center">
                            <select type="text" style="height: 22px; padding: 2px 5px; font-size: 12px; line-height: 1.5;" class="form-control input-xs" id="audience_list_$(index+1)" name="audience_list_$index">
                                $for key, audience in audience_list.items():
                                    $if not group or audience['_id'] not in group["audiences"]:
                                            <option value="$audience['_id']">$audience['description']</option>
                            </select>
                        </div>
                        <div class="col-sm-2 col-xs-6">
                            <button type="button" style="height: 22px; padding: 2px 5px; font-size: 12px; line-height: 1.5;" onclick="javascript:group_audience_add($$('#audience_list_$(index+1)').val(), $$('#audience_list_$(index+1) option:selected').text(), $(index+1))" class="form-control btn btn-xs btn-warning"><span class="fa fa-plus"></span> $:_("Add audience")</button>
                        </div>
                    </div>
                </div>

                $if group:
                    <ul class="list-group list-group-flush" id="audiences_$(index+1)">
                    $for audience_id in (group["audiences"] + [None]):
                            $ audience = audience_list.get(audience_id, None)
                            $if audience is None:
                                <li class="list-group-item" style="display:none;">
                                    <span></span>
                            $else:
                                <li class="list-group-item audience" id="$audience_id">
                                    <span>$audience["description"]</span>
                                    <input type="hidden" name="audiences" value="$audience['_id']">

                            <div class="pull-right"><a href="#" onclick="javascript:group_audience_remove($$(this).rparent(2).attr('id'), $(index+1))"><i class="fa fa-trash-o fa-lg"></i></a></div>
                        </li>
                    </ul>
                $else:
                    <ul class="list-group list-group-flush" id="audiences_$(index+1)">
                        <li class="list-group-item" style="display:none;">
                            <span></span>
                            <div class="pull-right"><a href="#" onclick="javascript:group_audience_remove($$(this).rparent(2).attr('id'), $(index+1))"><i class="fa fa-trash-o fa-lg"></i></a></div>
                        </li>
                    </ul>


                <div class="card-header clearfix" role="tab">
                    $:_("Students")
                </div>

                $if group:
                    <ul id="students" class="list-group list-group-flush students">
                        $for student in group["students"]:
                            <li data-username="$student" class="list-group-item group-entry">
                                $if users_info[student] is not None:
                                    <span id="$student"><i class="fa fa-arrows"></i> $users_info[student][0] ($student)</span>
                                $else:
                                    <span id="$student"><i class="fa fa-arrows"></i>$student</span>
                            </li>
                    </ul>
                $else:
                    <ul style="padding:0;" class="list-group list-group-flush students"></ul>
            </div>

        <div class="row mb-3">
            <div class="col-md-4">
                    <a href="#group_add" onclick="javascript:group_add()" id="group_add" class="btn btn-block btn-secondary">
                        <i class="fa fa-plus fa-lg"></i> $:_("New group")
                    </a>
            </div>
            <div class="col-md-4">
                    <a href="#" onclick="javascript:groups_clean()" class="btn btn-block btn-warning">
                        <i class="fa fa-eraser fa-lg"></i> $:_("Clean groups")
                    </a>
            </div>
            <div class="col-md-4">
                    <a href="#" onclick="javascript:groups_delete()" class="btn btn-block btn-danger">
                        <i class="fa fa-trash fa-lg"></i> $:_("Delete all groups")
                    </a>
            </div>
        </div>
    </div>
    <button name="update" class="btn btn-primary btn-block" onclick="javascript:groups_prepare_submit()" type="submit"><i class="fa fa-floppy-o"></i> $:_("Update")</button>
</form>

<!-- Javascript for managing student lists -->
<script type="text/javascript">
$$(document).ready(function() {
    if(!$$("#audience_list").val())
        $$("#audience_list").prop("disabled", true);

    $$("ul.students").sortable({group:"students"});
    $$("ul.students").bind("DOMSubtreeModified", function() {group_update($$(this).parent())});
    $$("input[id='size']").on('keyup click',function() {group_update($$(this).rparent(5))});
});
</script>
